<template>
  <div class="goods-box">
    <h2>更多·新品</h2>
    <div class="gengduo">
      <div v-for="(b, index) in gengduo" :key="index" style="width: 49%">
        <img :src="b.img" style="width: 100%" />
        <p>{{ b.name }}</p>
        <p>￥{{ b.price }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "gengduoxinpin",
  data() {
    return {
      gengduo:[],
    }
  },
  created(){
      axios({
        url:"/gengduo",
        method:"get",
      }).then((res)=>{
        this.gengduo=res.data;
      });
    },
};
</script>

<style scoped>
h2 {
  font-size: 0.2rem;
  padding-left: 0.18rem;
}
.xinpin {
  display: flex;
  height: 2.42rem;
  align-items: center;
  overflow: auto;
  /* padding-left: 0.1rem; */
  margin-top: 0.2rem;
}
::-webkit-scrollbar {
  width: 0;
}
.xinpin li {
  float: left;
  flex-shrink: 0;
  width: 1.28rem;
  height: 2.25rem;
  margin-left: 0.18rem;
}
.xinpin li p:nth-child(2){
  font-size: .1rem;
}
.xinpin li p:nth-child(3){
  margin-top: .2rem;
}
.gengduo{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: .2rem;
}
.gengduo div{
  margin-top: .1rem;
}
.gengduo p:nth-child(2){
  font-size: .1rem;
  padding-left: .1rem;
}
.gengduo p:nth-child(3){
  margin-top: .2rem;
  padding-left: .1rem;
}
</style>
